axios.defaults.baseURL = 'http://ajax-api.itheima.net';
const list = document.querySelector('.top');

const render = async () => {
  const { data: res } = await axios.get('/api/category/top');
  //   console.log(newArr)
  const newArr = res.data.map((item) => {
    return axios.get('/api/category/sub?id=' + item.id);
  });
  const pa = await Promise.all(newArr);
  //   console.log(pa)
  list.innerHTML = pa
    .map(({ data: item }) => {
      const { data } = item;
      //   console.log(item)
      return `<li>
        <a href="javascript:;">${data.name}</a>
        <img src="${data.picture}" alt="">
        <ul class="sub">
            ${data.children
              .map((item) => {
                return `<li>
                <a href="javascript:;">
                  <span>${item.name}</span>
                  <img src="${item.picture}" alt="">
                </a>
              </li>`;
              })
              .join('')}
        </ul>
      </li>`;
    })
    .join('');
};
render();
